<template>
  <div class="logo">数据同步分发</div>

  <el-button @click="dialogVisible = true">新增</el-button>
   <el-table :data="tableData" current-row-key="topicName" style="width: 100%">
    <el-table-column prop="topicName" label="主题" show-overflow-tooltip="true" min-width="150" />
    <el-table-column prop="dbName" label="数据库名称" width="120" />
    <el-table-column prop="tables" label="表列表" show-overflow-tooltip="true" min-width="160" />
    <el-table-column prop="createTime" label="创建时间" width="200" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleDelClick(scope.row.topicName)">删除</el-button>
        <el-button link type="primary" size="small" @click="handleEditClick(scope.row.topicName)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
    v-model="dialogVisible"
    title="配置"
    width="50%"
  >
  <el-form :model="form" label-width="120px">
    <el-form-item label="主题">
      <el-input v-model.trim="form.topicName" />
    </el-form-item>
    <el-form-item label="数据库名称">
      <el-input v-model.trim="form.dbName" />
    </el-form-item>
    <el-form-item label="表列表">
      <el-input v-model.trim="form.tables" type="textarea" placeholder="多个表名用英文逗号分隔(,)"/>
    </el-form-item>
  </el-form>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleSave">提交</el-button>
      </span>
    </template>
  </el-dialog>


  <el-backtop :right="100" :bottom="100" />
</template>
<script setup>
import { ref,reactive  } from 'vue'
import {getlist,delTopic,saveTopic,getTopic} from '@/apis/topicApi'
import { ElMessage } from 'element-plus'

const tableData=ref([])
const form = reactive({
        "topicName": "",
        "dbName": "",
        "tables":""
})
const getListData=async ()=>{
    const result=await getlist()
    tableData.value=result
}

const dialogVisible = ref(false)
const handleSave = () => {
  if(typeof(form.tables)=='string'){
    let tablesSet=form.tables.split(',')
     form.tables=tablesSet
  }
   
  saveTopic(form).then(res=>{
    if(res==1){
      ElMessage({
        type: 'success',
        message: `保存成功！`,
      })
      
    }else{
      ElMessage.error('保存失败！')
    }
    location.reload();
  })
  dialogVisible.value=false
}

const handleDelClick = (item) => {
  delTopic(item).then(res=>{
    if(res==1){
      ElMessage({
        type: 'success',
        message: `删除成功！`,
      })

    }else{
      ElMessage.error('删除失败！')
    }
    location.reload();
  })
}
const handleEditClick=(item)=>{
  getTopic(item).then(res=>{
    Object.assign(form,res)
    dialogVisible.value=true
  })
}

getListData()
</script>
<style scoped>
  
</style>
